import './Scss/SecurityCheck.scss'
import { useState, useEffect } from 'react'
import { Http } from '../../../../Common/Api'
import { useRequest, useBoolean } from 'ahooks'
import { Gauge } from '@ant-design/plots'
import { WebTemplateUrl } from './configuration'

export const SecurityCheck001 = () => {
    const { run: getSecurityStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { handled, handling, notOk, ok, submitted } = res
            const one = handling + notOk + ok + handled + submitted
            const two = handling + notOk + ok
            const thr = handled + submitted
            setData([
                { uuid: '1', title: '下单数', state: '', value: one, color: '#6CEFDC', icon: 'se001.png' },
                { uuid: '2', title: '已整改', state: '', value: two, color: '#6CD2EF', icon: 'se002.png' },
                { uuid: '3', title: '未整改', state: '', value: thr, color: '#99FFE6', icon: 'se003.png' },
            ])

            setPercent(two / one)
        },
    })

    const { runAsync: getJSZXSecurityStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => setDataFou(res.lateNum),
    })
    const [DataFou, setDataFou] = useState()
    useEffect(() => {
        getSecurityStat({ url: `getSecurityStat` })
        getJSZXSecurityStat({ url: 'getJSZXSecurityStat' })
    }, [getSecurityStat, getJSZXSecurityStat])
    const [percent, setPercent] = useState(0)
    const [Data, setData] = useState([])

    useEffect(() => {
        const config = {
            autoFit: false,
            width: 280,
            height: 140,
            percent: percent,
            radius: 0.9,
            startAngle: Math.PI,
            endAngle: 2 * Math.PI,
            range: { color: ['l(0) 0:#F28159 1:#ADEEBA', 'rgba(58, 168, 226, 0.2)'], width: 27 },
            indicator: null,
            statistic: {
                title: {
                    offsetY: -25,
                    style: { fontSize: '35px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                    formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}%`,
                },
                content: {
                    style: { fontSize: '16px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                    formatter: () => '整改率',
                },
            },
            gaugeStyle: { lineCap: 'round' },
        }
        setChartsData(config)
    }, [percent])

    const [ChartsData, setChartsData] = useState()

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    return (
        <div className="SecurityCheck001">
            <div>
                {ChartsData && <Gauge {...ChartsData} />}
                <div className="Table">
                    {Data.map(({ uuid, title, value, color, icon, state }) => (
                        <div
                            key={uuid}
                            onClick={() => {
                                setParameter({
                                    uuid: state,
                                    type: 'LargeScreeTable',
                                    classification: 'SecondaryInspectionTemplate',
                                })
                                setTrue()
                            }}
                        >
                            <img src={WebTemplateUrl + icon} alt="" />
                            <div>
                                <div style={{ color }}>{title}</div>
                                <div>{value}</div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            <div>
                <div className="Table">
                    <div>
                        <img src={WebTemplateUrl + 'se004.png'} alt="" />
                        <div>{DataFou}</div>
                    </div>
                    <div>本月总逾期</div>
                </div>
            </div>
        </div>
    )
}
